import React, { FC, Suspense } from 'react';
import styles from './app.module.less';
import { stringify } from 'qs';
import { Link, Outlet } from 'react-router-dom';
import logo from './assets/img/logo.png';
import Loading from './component/Loading/Loading';

const App: FC = () => {
  console.log(stringify);

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <div className={styles.wrap}>
          <div className={styles.logo}>
            <img src={logo} />
          </div>
          <nav className={styles.nav}>
            <ul className={styles.menu_ul}>
              <li>
                <Link to="/">首页</Link>
              </li>
              <li>
                <Link to="about">关于</Link>
              </li>
              <li>
                <Link to="news">新闻</Link>
              </li>
              <li>联系</li>
            </ul>
          </nav>
        </div>
      </header>
      <div className={styles.main}>
        <div className={styles.wrap}>
          <Suspense fallback={<Loading />}>
            <Outlet />
          </Suspense>
        </div>
      </div>
      <footer className={styles.footer}>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.left}>
              <div className={styles.wrap}>
                <div className={styles.logo}>
                  <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi9kNjU5MjY4OGU4ZTU5ODhkYmU3YmYzODMwZDEyNDdmZi0xNDB4MjUucG5n.png" />
                </div>
                <div className={styles.Copyright}>
                  Copyright &nbsp;© 2019 &nbsp;软件公司模板
                  苏ICP备0900000001号-3
                </div>
                <div className={styles.icons}>
                  <ul
                    className={styles.gallery_icons_list}
                    style={{ justifyContent: 'flex-start' }}
                  >
                    <li className={styles.qq}></li>
                    <li className={styles.weixin}></li>
                    <li className={styles.youjian}></li>
                    <li className={styles.facebook}></li>
                  </ul>
                </div>
              </div>
            </div>
            <div className={styles.center}>
              <div className={styles.wrap}>
                <div className={styles.headerTitle}>联系我们</div>
                <div className={styles.info}>
                  <p>电话：+86 123 1234 1234</p>
                  <p>邮箱：software@email.com</p>
                  <p>地址：深圳市南京路双港码头6楼</p>
                </div>
              </div>
            </div>
            <div className={styles.right}>
              <div className={styles.wrap}>
                <div className={styles.headerTitle}>帮助中心</div>
                <div className={styles.info}>
                  <p>关于我们</p>
                  <p>服务支持</p>
                  <p>法律和隐私</p>
                </div>
              </div>
            </div>

            <div className={styles.followUs}>
              <div className={styles.headerTitle}>关注我们</div>
              <div className={styles.info}>
                <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi8zNDg1ODhmZDhhNGY2NmFlM2NhYzFkMWIxZGMzYmNkNy5qcGc_p_p100_p_3D.jpg" />
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
